<template>
  <div>
    <AccountDlg
      v-if="dialog.show"
      :dialog="dialog"
      @dlgChange="closeDlg"
    ></AccountDlg>
    <el-button type="primary" class="pull-right" size="small" @click="showDlg"
      >添加账户</el-button
    >
    <el-table :data="accounts" border style="width: 100%">
      <el-table-column label="序号" align="center">
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column prop="name" label="账户" align="center">
        <template #default="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      <el-table-column prop="type_" label="类型" align="center">
        <template #default="scope">{{ scope.row.type_ }} </template>
      </el-table-column>
      <el-table-column prop="subtype" label="子类型" align="center">
        <template #default="scope">{{ scope.row.subtype }} </template>
      </el-table-column>
      <el-table-column prop="owner" label="持有人" align="center">
        <template #default="scope">{{ scope.row.owner }} </template>
      </el-table-column>
      <el-table-column prop="balance" label="余额" align="center">
        <template #default="scope">{{ scope.row.balance }} </template>
      </el-table-column>

      <el-table-column prop="operation" align="center" label="操作">
        <template #default="scope">
          <el-button
            icon="edit"
            @click="editBasic(scope.row)"
            type="danger"
            size="small"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getAccBasic } from "@/apis/account";
import { onMounted, ref, getCurrentInstance } from "vue";
import AccountDlg from "./Components/AccountDlg";

export default {
  name: "AccBasic",
  components: { AccountDlg },
  setup() {
    const { proxy } = getCurrentInstance();
    const dialog = ref({
      show: false
    });
    const showDlg = () => {
      dialog.value.show = true;
    };
    const closeDlg = refresh => {
      if (refresh) {
        getBasic();
      }
      dialog.value.show = false;
    };
    const accounts = ref();
    const getBasic = () => {
      getAccBasic()
        .then(response => {
          accounts.value = response.data;
        })
        .catch(error => {
          proxy.$message.error(error.message);
        });
    };
    onMounted(() => {
      getBasic();
    });
    return {
      dialog,
      showDlg,
      accounts,
      closeDlg
    };
  }
};
</script>

<style lang="scss" scoped>
.el-button {
  margin-bottom: 10px;
  margin-right: 20px;
}
</style>
